<template>
	<view class="course-page">
		<!-- <view class="zhan1"></view> -->
		<view class="search-top" >
			<input class="search-input iconfont" :placeholder="placeholder" placeholder-style="color:#666666;" confirm-type="search" @confirm="search">
			<!-- <span class="text" @tap="back">取消</span> -->
		</view>
		<view class="type-box" @tap="back">
			<view class="main">
				<p class="name">返回 <span style="color:#1783dd;margin-left:10rpx;">继续课程首页</span></p>
				<span class="iconfont icongengduo1"></span>
			</view>
		</view>
		<view class="type-main">
			<view class="top"> 一 课程分类 一 </view>
			<view class="type-all">
				<view class="item" v-for="(item,index) in typeList1">
					<span class="iconfont" :class="item.icon"></span>
					<span class="name">{{item.title}}</span>
				</view>
			</view>
		</view>
		<view class="type-main">
			<view class="top"> 一 收费类型 一 </view>
			<view class="type-all">
				<view class="item" v-for="(item,index) in typeList2">
					<span class="iconfont" :class="item.icon"></span>
					<span class="name">{{item.title}}</span>
				</view>
			</view>
		</view>
		<view class="type-main">
			<view class="top"> 一 课程类型 一 </view>
			<view class="type-all">
				<view class="item" v-for="(item,index) in typeList3">
					<span class="iconfont" :class="item.icon"></span>
					<span class="name">{{item.title}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		components: {},
		data() {
			return {
				placeholder:'\ue60c 输入内容',
				courseList:[
					{url:'http://www.jzcqedu.com:8080/userfiles/front/file/1586427014751.jpg',number:'6',title:'Premiere',man:'9652'},
					{url:'http://www.jzcqedu.com:8080/userfiles/front/file/1586427014751.jpg',number:'6',title:'Premiere',man:'9652'},
					{url:'http://www.jzcqedu.com:8080/userfiles/front/file/1586427014751.jpg',number:'6',title:'Premiere',man:'9652'},
					{url:'http://www.jzcqedu.com:8080/userfiles/front/file/1586427014751.jpg',number:'6',title:'Premiere',man:'9652'},
				],
				typeList1:[
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
					{title:'化学',icon:'iconfeneli-copy'},
				],
				typeList2:[
					{title:'免费',icon:'iconfeneli-copy'},
					{title:'收费',icon:'iconfeneli-copy'},
					{title:'理学',icon:'iconfeneli-copy'},
				],
				typeList3:[
					{title:'视频课程',icon:'iconfeneli-copy'},
					{title:'点播课程',icon:'iconfeneli-copy'},
					{title:'面授课程',icon:'iconfeneli-copy'},
				],
			}
		},
		onLoad() {

		},
		methods: {
			goPage(url){
				uni.navigateTo({
				    url: url
				});
			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			search(){

			},
			change(item){
				this.current = item.detail.current;
			},
			goSelect(){
				console.log(222)
			},
			select(index){
				this.active = index;
				this.list.forEach((item,i)=>{
					if(i==index){
						item.addClass = "active"
					}
					else{
						item.addClass = ""
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.course-page{
		width:100%;
		height:100%;
		background:#f5f5f5;
		overflow-y:auto;
		.type-main{
			width:100%;
			padding:0 30rpx;
			box-sizing:border-box;
			margin-bottom:40rpx;
			.top{
				width:100%;
				height:50rpx;
				line-height:50rpx;
				text-align:center;
				font-size:32rpx;
				color:#555555;

			}
			.type-all{
				width:100%;
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
				.item{
					width:210rpx;
					background:#ffffff;
					box-shadow:0 2rpx 8rpx #d0d0d0;
					margin-top:30rpx;
					padding:30rpx 0;
					padding-bottom:20rpx;
					.iconfont{
						margin:0 auto;
						font-size:70rpx;
						color:#1783dd;
						display:block;
						width:160rpx;
						height:40rpx;
						line-height:40rpx;
						text-align:center;
					}
					.name{
						width:100%;
						display:block;
						margin-top:15rpx;
						line-height:40rpx;
						text-align:center;
						font-size:30rpx;
						color:#555555;
					}
				}
			}
		}
		.type-box{
			width:690rpx;
			margin:30rpx auto;
			height:110rpx;
			border-radius:10rpx;
			background:#ffffff;
			box-shadow:0 2rpx 10rpx #e0e0e0;
			display:flex;
			box-sizing:border-box;
			padding:0 40rpx;
			align-items:center;
			.main{
				width:100%;
				position:relative;
				.iconfont{
					font-size:56rpx;
					position:absolute;
					font-weight:600;
					right:0;
					color:#b3b3b3;
					top:50%;
					transform:translateY(-50%);
				}
				.name{
					display:block;
					width:100%;
					line-height:40rpx;
					font-size:32rpx;
					color:#444444;
				}
				.text{
					display:block;
					width:100%;
					line-height:40rpx;
					font-size:28rpx;
					color:#888888;
					margin-top:5rpx;
				}
			}
		}
		.search-top{
			width:100%;
			padding:0 30rpx;
			height:100rpx;
			display:flex;
			justify-content:space-between;
			align-items:center;
			box-sizing:border-box;
			border-bottom:1px solid #e6e6e6;
			background:#ffffff;
			
			.search-input{
				width:100%;
				height:60rpx;
				border-radius:60rpx;
				background:#f4f4f4;
				box-sizing:border-box;
				padding:0 30rpx;
				font-size:28rpx;
				color:#555555;
				line-height:70rpx;
				text-align:center;
			}
			.text{
				font-size:32rpx;
				color:#1783dd;
			}
		}
	}
</style>
